<!DOCTYPE html>
<html>
<head>
    {include file="_Fragment/meta" /}
    <link rel="stylesheet" href="/static/pear/component/pear/css/pear.css" />
    <link rel="stylesheet" href="/static/pear/admin/css/other/console1.css" />
</head>
<body class="pear-container">
<div class="layui-row layui-col-space10">
    <div class="layui-col-md12">
        <div class="layui-card">
            <div class="layui-card-header">
                平台数据概览
            </div>
            <div class="layui-card-body">
                <form class="layui-form" action="">
                    <div class="layui-input-inline">
                        <select name="date" lay-filter="contact1">
                            <option value="1">近7天</option>
                            <option value="2">近30天</option>
                        </select>
                    </div>
                    <div class="layui-input-inline">
                        <input type="text" name="time" id="date1" placeholder="时间段" autocomplete="off" class="layui-input">
                    </div>
                </form>
                <div class="layui-tab custom-tab layui-tab-brief" lay-filter="docDemoTabBrief">
                    <div id="echarts-records" style="background-color:#ffffff;min-height:400px;padding: 10px"></div>
                </div>
            </div>
        </div>
        <div class="layui-card">
            <div class="layui-card-header">
                本月热门课程
            </div>
            <div class="layui-card-body">
                <form class="layui-form" action="">
                    <div class="layui-input-inline">
                        <select name="type">
                            <option value="1">E-learning</option>
                            <option value="2">轻学堂</option>
                            <option value="4">直播课</option>
                        </select>
                    </div>
                    <button class="pear-btn pear-btn-md pear-btn-primary" lay-submit lay-filter="user-query">
                        <i class="layui-icon layui-icon-search"></i>
                        查询
                    </button>
                </form>
                <table id="user-table"></table>
            </div>
        </div>
    </div>
</div>
</div>
<!--</div>-->
{include file="_Fragment/javascript" /}
<script>

    layui.use(['layer', 'echarts', 'element', 'laydate', 'form' , 'table'], function() {
        var $ = layui.jquery,
            layer = layui.layer,
            element = layui.element,
            laydate = layui.laydate,
            form = layui.form,
            table = layui.table,
            echarts = layui.echarts;
        laydate.render({
            elem: '#date2'
            , range: true //或 range: '~' 来自定义分割字符
            , trigger: 'click'
            , type: 'date'
        })
        let cols = [
            [
                {
                    title: '排名',
                    field: 'ranking',
                    align: 'center'
                },
                {
                    title: '课程',
                    field: 'title',
                    align: 'center'
                },
                {
                    title: '人数',
                    field: 'count',
                    align: 'center'
                }
            ]
        ]

        table.render({
            elem: '#user-table',
            url: '/Total/getCourseList',
            page: false,
            cols: cols,
            //skin: 'line'
        });

        form.on('submit(user-query)', function(data) {
            table.reload('user-table', {
                where: data.field
            })
            return false;
        });



        var echartsRecords = echarts.init(document.getElementById('echarts-records'), 'walden');

        $.ajax({
            url: "/Total/getEchartData",
            dataType: 'json',
            type: 'post',
            success: function(res) {
                let bgColor = "#fff";
                let color = [
                    "#0090FF",
                    "#36CE9E",
                    "#FFC005",
                    "#FF515A",
                    "#8B5CFF",
                    "#00CA69"
                ];
                let echartData = res.data;
                let xAxisData = echartData.map(v => v.name);
                //  ["1", "2", "3", "4", "5", "6", "7", "8"]
                let yAxisData1 = echartData.map(v => v.value1);
                // [100, 138, 350, 173, 180, 150, 180, 230]
                let yAxisData2 = echartData.map(v => v.value2);
                // [233, 233, 200, 180, 199, 233, 210, 180]
                let yAxisData3 = echartData.map(v => v.value3);
                // [233, 233, 200, 180, 199, 233, 210, 180]
                let yAxisData4 = echartData.map(v => v.value4);
                // [233, 233, 200, 180, 199, 233, 210, 180]
                let yAxisData5 = echartData.map(v => v.value5);
                // [233, 233, 200, 180, 199, 233, 210, 180]
                const hexToRgba = (hex, opacity) => {
                    let rgbaColor = "";
                    let reg = /^#[\da-f]{6}$/i;
                    if (reg.test(hex)) {
                        rgbaColor =
                            `rgba(${parseInt("0x" + hex.slice(1, 3))},${parseInt(
                                "0x" + hex.slice(3, 5)
                            )},${parseInt("0x" + hex.slice(5, 7))},${opacity})`;
                    }
                    return rgbaColor;
                }

                option = {
                    backgroundColor: bgColor,
                    color: color,
                    legend: {
                        right: 10,
                        top: 10
                    },
                    tooltip: {
                        trigger: "axis",
                        formatter: function(params) {
                            let html = '';
                            params.forEach(v => {
                                console.log(v)
                                html +=
                                    `<div style="color: #666;font-size: 14px;line-height: 24px">
					                <span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${color[v.componentIndex]};"></span>
					                ${v.seriesName}.${v.name}
					                <span style="color:${color[v.componentIndex]};font-weight:700;font-size: 18px">${v.value}</span>
					                `;
                            })



                            return html
                        },
                        extraCssText: 'background: #fff; border-radius: 0;box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);color: #333;',
                        axisPointer: {
                            type: 'shadow',
                            shadowStyle: {
                                color: '#ffffff',
                                shadowColor: 'rgba(225,225,225,1)',
                                shadowBlur: 5
                            }
                        }
                    },
                    grid: {
                        top: '10%',
                        bottom: '6%',
                        left: '6%',
                        right: '6%',
                        containLabel: true
                    },
                    xAxis: [{
                        type: "category",
                        boundaryGap: false,
                        axisLabel: {
                            formatter: '{value}',
                            textStyle: {
                                color: "#333"
                            }
                        },
                        axisLine: {
                            lineStyle: {
                                color: "#D9D9D9"
                            }
                        },
                        data: xAxisData
                    }],
                    yAxis: [{
                        type: "value",
                        axisLabel: {
                            textStyle: {
                                color: "#666"
                            }
                        },
                        nameTextStyle: {
                            color: "#666",
                            fontSize: 12,
                            lineHeight: 40
                        },
                        splitLine: {
                            lineStyle: {
                                type: "dashed",
                                color: "#E9E9E9"
                            }
                        },
                        axisLine: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        }
                    }],
                    series: [{
                        name: "小程序打开次数",
                        type: "line",
                        smooth: true,
                        // showSymbol: false,/
                        symbolSize: 8,
                        zlevel: 3,
                        lineStyle: {
                            normal: {
                                color: color[0],
                                shadowBlur: 3,
                                shadowColor: hexToRgba(color[0], 0.5),
                                shadowOffsetY: 8
                            }
                        },
                        areaStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(
                                    0,
                                    0,
                                    0,
                                    1,
                                    [{
                                        offset: 0,
                                        color: hexToRgba(color[0], 0.3)
                                    },
                                        {
                                            offset: 1,
                                            color: hexToRgba(color[0], 0.1)
                                        }
                                    ],
                                    false
                                ),
                                shadowColor: hexToRgba(color[0], 0.1),
                                shadowBlur: 10
                            }
                        },
                        data: yAxisData1
                    }, {
                        name: "访客数(UV)",
                        type: "line",
                        smooth: true,
                        // showSymbol: false,
                        symbolSize: 8,
                        zlevel: 3,
                        lineStyle: {
                            normal: {
                                color: color[1],
                                shadowBlur: 3,
                                shadowColor: hexToRgba(color[1], 0.5),
                                shadowOffsetY: 8
                            }
                        },
                        areaStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(
                                    0,
                                    0,
                                    0,
                                    1,
                                    [{
                                        offset: 0,
                                        color: hexToRgba(color[1], 0.3)
                                    },
                                        {
                                            offset: 1,
                                            color: hexToRgba(color[1], 0.1)
                                        }
                                    ],
                                    false
                                ),
                                shadowColor: hexToRgba(color[1], 0.1),
                                shadowBlur: 10
                            }
                        },
                        data: yAxisData2
                    }, {
                        name: "活跃人数",
                        type: "line",
                        smooth: true,
                        // showSymbol: false,
                        symbolSize: 8,
                        zlevel: 3,
                        lineStyle: {
                            normal: {
                                color: color[2],
                                shadowBlur: 3,
                                shadowColor: hexToRgba(color[1], 0.5),
                                shadowOffsetY: 8
                            }
                        },
                        areaStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(
                                    0,
                                    0,
                                    0,
                                    1,
                                    [{
                                        offset: 0,
                                        color: hexToRgba(color[1], 0.3)
                                    },
                                        {
                                            offset: 1,
                                            color: hexToRgba(color[1], 0.1)
                                        }
                                    ],
                                    false
                                ),
                                shadowColor: hexToRgba(color[1], 0.1),
                                shadowBlur: 10
                            }
                        },
                        data: yAxisData3
                    }, {
                        name: "学习人数",
                        type: "line",
                        smooth: true,
                        // showSymbol: false,
                        symbolSize: 8,
                        zlevel: 3,
                        lineStyle: {
                            normal: {
                                color: color[3],
                                shadowBlur: 3,
                                shadowColor: hexToRgba(color[1], 0.5),
                                shadowOffsetY: 8
                            }
                        },
                        areaStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(
                                    0,
                                    0,
                                    0,
                                    1,
                                    [{
                                        offset: 0,
                                        color: hexToRgba(color[1], 0.3)
                                    },
                                        {
                                            offset: 1,
                                            color: hexToRgba(color[1], 0.1)
                                        }
                                    ],
                                    false
                                ),
                                shadowColor: hexToRgba(color[1], 0.1),
                                shadowBlur: 10
                            }
                        },
                        data: yAxisData4
                    }, {
                        name: "新增学习人数",
                        type: "line",
                        smooth: true,
                        // showSymbol: false,
                        symbolSize: 8,
                        zlevel: 3,
                        lineStyle: {
                            normal: {
                                color: color[3],
                                shadowBlur: 3,
                                shadowColor: hexToRgba(color[1], 0.5),
                                shadowOffsetY: 8
                            }
                        },
                        areaStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(
                                    0,
                                    0,
                                    0,
                                    1,
                                    [{
                                        offset: 0,
                                        color: hexToRgba(color[1], 0.3)
                                    },
                                        {
                                            offset: 1,
                                            color: hexToRgba(color[1], 0.1)
                                        }
                                    ],
                                    false
                                ),
                                shadowColor: hexToRgba(color[1], 0.1),
                                shadowBlur: 10
                            }
                        },
                        data: yAxisData5
                    }]
                };

                echartsRecords.setOption(option);
            }
        })


        laydate.render({
            elem: '#date1'
            ,range: true //或 range: '~' 来自定义分割字符
            ,trigger: 'click'
            ,type: 'date'
            ,done: function(value) {
                $.ajax({
                    url: "/Total/getEchartData1",
                    data:{date:value},
                    dataType: 'json',
                    type: 'post',
                    success: function(res) {
                        let bgColor = "#fff";
                        let color = [
                            "#0090FF",
                            "#36CE9E",
                            "#FFC005",
                            "#FF515A",
                            "#8B5CFF",
                            "#00CA69"
                        ];
                        let echartData = res.data;
                        let xAxisData = echartData.map(v => v.name);
                        //  ["1", "2", "3", "4", "5", "6", "7", "8"]
                        let yAxisData1 = echartData.map(v => v.value1);
                        // [100, 138, 350, 173, 180, 150, 180, 230]
                        let yAxisData2 = echartData.map(v => v.value2);
                        // [233, 233, 200, 180, 199, 233, 210, 180]
                        let yAxisData3 = echartData.map(v => v.value3);
                        // [233, 233, 200, 180, 199, 233, 210, 180]
                        let yAxisData4 = echartData.map(v => v.value4);
                        // [233, 233, 200, 180, 199, 233, 210, 180]
                        let yAxisData5 = echartData.map(v => v.value5);
                        // [233, 233, 200, 180, 199, 233, 210, 180]
                        const hexToRgba = (hex, opacity) => {
                            let rgbaColor = "";
                            let reg = /^#[\da-f]{6}$/i;
                            if (reg.test(hex)) {
                                rgbaColor =
                                    `rgba(${parseInt("0x" + hex.slice(1, 3))},${parseInt(
                                        "0x" + hex.slice(3, 5)
                                    )},${parseInt("0x" + hex.slice(5, 7))},${opacity})`;
                            }
                            return rgbaColor;
                        }

                        option = {
                            backgroundColor: bgColor,
                            color: color,
                            legend: {
                                right: 10,
                                top: 10
                            },
                            tooltip: {
                                trigger: "axis",
                                formatter: function(params) {
                                    let html = '';
                                    params.forEach(v => {
                                        console.log(v)
                                        html +=
                                            `<div style="color: #666;font-size: 14px;line-height: 24px">
					                <span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${color[v.componentIndex]};"></span>
					                ${v.seriesName}.${v.name}
					                <span style="color:${color[v.componentIndex]};font-weight:700;font-size: 18px">${v.value}</span>
					                `;
                                    })



                                    return html
                                },
                                extraCssText: 'background: #fff; border-radius: 0;box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);color: #333;',
                                axisPointer: {
                                    type: 'shadow',
                                    shadowStyle: {
                                        color: '#ffffff',
                                        shadowColor: 'rgba(225,225,225,1)',
                                        shadowBlur: 5
                                    }
                                }
                            },
                            grid: {
                                top: '10%',
                                bottom: '6%',
                                left: '6%',
                                right: '6%',
                                containLabel: true
                            },
                            xAxis: [{
                                type: "category",
                                boundaryGap: false,
                                axisLabel: {
                                    formatter: '{value}',
                                    textStyle: {
                                        color: "#333"
                                    }
                                },
                                axisLine: {
                                    lineStyle: {
                                        color: "#D9D9D9"
                                    }
                                },
                                data: xAxisData
                            }],
                            yAxis: [{
                                type: "value",
                                axisLabel: {
                                    textStyle: {
                                        color: "#666"
                                    }
                                },
                                nameTextStyle: {
                                    color: "#666",
                                    fontSize: 12,
                                    lineHeight: 40
                                },
                                splitLine: {
                                    lineStyle: {
                                        type: "dashed",
                                        color: "#E9E9E9"
                                    }
                                },
                                axisLine: {
                                    show: false
                                },
                                axisTick: {
                                    show: false
                                }
                            }],
                            series: [{
                                name: "小程序打开次数",
                                type: "line",
                                smooth: true,
                                // showSymbol: false,/
                                symbolSize: 8,
                                zlevel: 3,
                                lineStyle: {
                                    normal: {
                                        color: color[0],
                                        shadowBlur: 3,
                                        shadowColor: hexToRgba(color[0], 0.5),
                                        shadowOffsetY: 8
                                    }
                                },
                                areaStyle: {
                                    normal: {
                                        color: new echarts.graphic.LinearGradient(
                                            0,
                                            0,
                                            0,
                                            1,
                                            [{
                                                offset: 0,
                                                color: hexToRgba(color[0], 0.3)
                                            },
                                                {
                                                    offset: 1,
                                                    color: hexToRgba(color[0], 0.1)
                                                }
                                            ],
                                            false
                                        ),
                                        shadowColor: hexToRgba(color[0], 0.1),
                                        shadowBlur: 10
                                    }
                                },
                                data: yAxisData1
                            }, {
                                name: "访客数(UV)",
                                type: "line",
                                smooth: true,
                                // showSymbol: false,
                                symbolSize: 8,
                                zlevel: 3,
                                lineStyle: {
                                    normal: {
                                        color: color[1],
                                        shadowBlur: 3,
                                        shadowColor: hexToRgba(color[1], 0.5),
                                        shadowOffsetY: 8
                                    }
                                },
                                areaStyle: {
                                    normal: {
                                        color: new echarts.graphic.LinearGradient(
                                            0,
                                            0,
                                            0,
                                            1,
                                            [{
                                                offset: 0,
                                                color: hexToRgba(color[1], 0.3)
                                            },
                                                {
                                                    offset: 1,
                                                    color: hexToRgba(color[1], 0.1)
                                                }
                                            ],
                                            false
                                        ),
                                        shadowColor: hexToRgba(color[1], 0.1),
                                        shadowBlur: 10
                                    }
                                },
                                data: yAxisData2
                            }, {
                                name: "活跃人数",
                                type: "line",
                                smooth: true,
                                // showSymbol: false,
                                symbolSize: 8,
                                zlevel: 3,
                                lineStyle: {
                                    normal: {
                                        color: color[2],
                                        shadowBlur: 3,
                                        shadowColor: hexToRgba(color[1], 0.5),
                                        shadowOffsetY: 8
                                    }
                                },
                                areaStyle: {
                                    normal: {
                                        color: new echarts.graphic.LinearGradient(
                                            0,
                                            0,
                                            0,
                                            1,
                                            [{
                                                offset: 0,
                                                color: hexToRgba(color[1], 0.3)
                                            },
                                                {
                                                    offset: 1,
                                                    color: hexToRgba(color[1], 0.1)
                                                }
                                            ],
                                            false
                                        ),
                                        shadowColor: hexToRgba(color[1], 0.1),
                                        shadowBlur: 10
                                    }
                                },
                                data: yAxisData3
                            }, {
                                name: "学习人数",
                                type: "line",
                                smooth: true,
                                // showSymbol: false,
                                symbolSize: 8,
                                zlevel: 3,
                                lineStyle: {
                                    normal: {
                                        color: color[3],
                                        shadowBlur: 3,
                                        shadowColor: hexToRgba(color[1], 0.5),
                                        shadowOffsetY: 8
                                    }
                                },
                                areaStyle: {
                                    normal: {
                                        color: new echarts.graphic.LinearGradient(
                                            0,
                                            0,
                                            0,
                                            1,
                                            [{
                                                offset: 0,
                                                color: hexToRgba(color[1], 0.3)
                                            },
                                                {
                                                    offset: 1,
                                                    color: hexToRgba(color[1], 0.1)
                                                }
                                            ],
                                            false
                                        ),
                                        shadowColor: hexToRgba(color[1], 0.1),
                                        shadowBlur: 10
                                    }
                                },
                                data: yAxisData4
                            }, {
                                name: "新增学习人数",
                                type: "line",
                                smooth: true,
                                // showSymbol: false,
                                symbolSize: 8,
                                zlevel: 3,
                                lineStyle: {
                                    normal: {
                                        color: color[3],
                                        shadowBlur: 3,
                                        shadowColor: hexToRgba(color[1], 0.5),
                                        shadowOffsetY: 8
                                    }
                                },
                                areaStyle: {
                                    normal: {
                                        color: new echarts.graphic.LinearGradient(
                                            0,
                                            0,
                                            0,
                                            1,
                                            [{
                                                offset: 0,
                                                color: hexToRgba(color[1], 0.3)
                                            },
                                                {
                                                    offset: 1,
                                                    color: hexToRgba(color[1], 0.1)
                                                }
                                            ],
                                            false
                                        ),
                                        shadowColor: hexToRgba(color[1], 0.1),
                                        shadowBlur: 10
                                    }
                                },
                                data: yAxisData5
                            }]
                        };

                        echartsRecords.setOption(option);
                    }
                })
            }
        });

        form.on('select(contact1)', function(data){
            $.ajax({
                url: "/Total/getEchartData",
                data:{date:data.value},
                dataType: 'json',
                type: 'post',
                success: function(res) {
                    let bgColor = "#fff";
                    let color = [
                        "#0090FF",
                        "#36CE9E",
                        "#FFC005",
                        "#FF515A",
                        "#8B5CFF",
                        "#00CA69"
                    ];
                    let echartData = res.data;
                    let xAxisData = echartData.map(v => v.name);
                    //  ["1", "2", "3", "4", "5", "6", "7", "8"]
                    let yAxisData1 = echartData.map(v => v.value1);
                    // [100, 138, 350, 173, 180, 150, 180, 230]
                    let yAxisData2 = echartData.map(v => v.value2);
                    // [233, 233, 200, 180, 199, 233, 210, 180]
                    let yAxisData3 = echartData.map(v => v.value3);
                    // [233, 233, 200, 180, 199, 233, 210, 180]
                    let yAxisData4 = echartData.map(v => v.value4);
                    // [233, 233, 200, 180, 199, 233, 210, 180]
                    let yAxisData5 = echartData.map(v => v.value5);
                    // [233, 233, 200, 180, 199, 233, 210, 180]
                    const hexToRgba = (hex, opacity) => {
                        let rgbaColor = "";
                        let reg = /^#[\da-f]{6}$/i;
                        if (reg.test(hex)) {
                            rgbaColor =
                                `rgba(${parseInt("0x" + hex.slice(1, 3))},${parseInt(
                                    "0x" + hex.slice(3, 5)
                                )},${parseInt("0x" + hex.slice(5, 7))},${opacity})`;
                        }
                        return rgbaColor;
                    }

                    option = {
                        backgroundColor: bgColor,
                        color: color,
                        legend: {
                            right: 10,
                            top: 10
                        },
                        tooltip: {
                            trigger: "axis",
                            formatter: function(params) {
                                let html = '';
                                params.forEach(v => {
                                    console.log(v)
                                    html +=
                                        `<div style="color: #666;font-size: 14px;line-height: 24px">
					                <span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${color[v.componentIndex]};"></span>
					                ${v.seriesName}.${v.name}
					                <span style="color:${color[v.componentIndex]};font-weight:700;font-size: 18px">${v.value}</span>
					                `;
                                })



                                return html
                            },
                            extraCssText: 'background: #fff; border-radius: 0;box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);color: #333;',
                            axisPointer: {
                                type: 'shadow',
                                shadowStyle: {
                                    color: '#ffffff',
                                    shadowColor: 'rgba(225,225,225,1)',
                                    shadowBlur: 5
                                }
                            }
                        },
                        grid: {
                            top: '10%',
                            bottom: '6%',
                            left: '6%',
                            right: '6%',
                            containLabel: true
                        },
                        xAxis: [{
                            type: "category",
                            boundaryGap: false,
                            axisLabel: {
                                formatter: '{value}',
                                textStyle: {
                                    color: "#333"
                                }
                            },
                            axisLine: {
                                lineStyle: {
                                    color: "#D9D9D9"
                                }
                            },
                            data: xAxisData
                        }],
                        yAxis: [{
                            type: "value",
                            axisLabel: {
                                textStyle: {
                                    color: "#666"
                                }
                            },
                            nameTextStyle: {
                                color: "#666",
                                fontSize: 12,
                                lineHeight: 40
                            },
                            splitLine: {
                                lineStyle: {
                                    type: "dashed",
                                    color: "#E9E9E9"
                                }
                            },
                            axisLine: {
                                show: false
                            },
                            axisTick: {
                                show: false
                            }
                        }],
                        series: [{
                            name: "小程序打开次数",
                            type: "line",
                            smooth: true,
                            // showSymbol: false,/
                            symbolSize: 8,
                            zlevel: 3,
                            lineStyle: {
                                normal: {
                                    color: color[0],
                                    shadowBlur: 3,
                                    shadowColor: hexToRgba(color[0], 0.5),
                                    shadowOffsetY: 8
                                }
                            },
                            areaStyle: {
                                normal: {
                                    color: new echarts.graphic.LinearGradient(
                                        0,
                                        0,
                                        0,
                                        1,
                                        [{
                                            offset: 0,
                                            color: hexToRgba(color[0], 0.3)
                                        },
                                            {
                                                offset: 1,
                                                color: hexToRgba(color[0], 0.1)
                                            }
                                        ],
                                        false
                                    ),
                                    shadowColor: hexToRgba(color[0], 0.1),
                                    shadowBlur: 10
                                }
                            },
                            data: yAxisData1
                        }, {
                            name: "访客数(UV)",
                            type: "line",
                            smooth: true,
                            // showSymbol: false,
                            symbolSize: 8,
                            zlevel: 3,
                            lineStyle: {
                                normal: {
                                    color: color[1],
                                    shadowBlur: 3,
                                    shadowColor: hexToRgba(color[1], 0.5),
                                    shadowOffsetY: 8
                                }
                            },
                            areaStyle: {
                                normal: {
                                    color: new echarts.graphic.LinearGradient(
                                        0,
                                        0,
                                        0,
                                        1,
                                        [{
                                            offset: 0,
                                            color: hexToRgba(color[1], 0.3)
                                        },
                                            {
                                                offset: 1,
                                                color: hexToRgba(color[1], 0.1)
                                            }
                                        ],
                                        false
                                    ),
                                    shadowColor: hexToRgba(color[1], 0.1),
                                    shadowBlur: 10
                                }
                            },
                            data: yAxisData2
                        }, {
                            name: "活跃人数",
                            type: "line",
                            smooth: true,
                            // showSymbol: false,
                            symbolSize: 8,
                            zlevel: 3,
                            lineStyle: {
                                normal: {
                                    color: color[2],
                                    shadowBlur: 3,
                                    shadowColor: hexToRgba(color[1], 0.5),
                                    shadowOffsetY: 8
                                }
                            },
                            areaStyle: {
                                normal: {
                                    color: new echarts.graphic.LinearGradient(
                                        0,
                                        0,
                                        0,
                                        1,
                                        [{
                                            offset: 0,
                                            color: hexToRgba(color[1], 0.3)
                                        },
                                            {
                                                offset: 1,
                                                color: hexToRgba(color[1], 0.1)
                                            }
                                        ],
                                        false
                                    ),
                                    shadowColor: hexToRgba(color[1], 0.1),
                                    shadowBlur: 10
                                }
                            },
                            data: yAxisData3
                        }, {
                            name: "学习人数",
                            type: "line",
                            smooth: true,
                            // showSymbol: false,
                            symbolSize: 8,
                            zlevel: 3,
                            lineStyle: {
                                normal: {
                                    color: color[3],
                                    shadowBlur: 3,
                                    shadowColor: hexToRgba(color[1], 0.5),
                                    shadowOffsetY: 8
                                }
                            },
                            areaStyle: {
                                normal: {
                                    color: new echarts.graphic.LinearGradient(
                                        0,
                                        0,
                                        0,
                                        1,
                                        [{
                                            offset: 0,
                                            color: hexToRgba(color[1], 0.3)
                                        },
                                            {
                                                offset: 1,
                                                color: hexToRgba(color[1], 0.1)
                                            }
                                        ],
                                        false
                                    ),
                                    shadowColor: hexToRgba(color[1], 0.1),
                                    shadowBlur: 10
                                }
                            },
                            data: yAxisData4
                        }, {
                            name: "新增学习人数",
                            type: "line",
                            smooth: true,
                            // showSymbol: false,
                            symbolSize: 8,
                            zlevel: 3,
                            lineStyle: {
                                normal: {
                                    color: color[3],
                                    shadowBlur: 3,
                                    shadowColor: hexToRgba(color[1], 0.5),
                                    shadowOffsetY: 8
                                }
                            },
                            areaStyle: {
                                normal: {
                                    color: new echarts.graphic.LinearGradient(
                                        0,
                                        0,
                                        0,
                                        1,
                                        [{
                                            offset: 0,
                                            color: hexToRgba(color[1], 0.3)
                                        },
                                            {
                                                offset: 1,
                                                color: hexToRgba(color[1], 0.1)
                                            }
                                        ],
                                        false
                                    ),
                                    shadowColor: hexToRgba(color[1], 0.1),
                                    shadowBlur: 10
                                }
                            },
                            data: yAxisData5
                        }]
                    };

                    echartsRecords.setOption(option);
                }
            })
        });
        window.onresize = function() {
            echartsRecords.resize();
        }
    });
</script>
</body>
</html>
